<template>
    <div>
      <h2 v-if="isShow">v-if条件渲染的基本使用</h2>
      <button @click="toggle">单击切换显示和隐藏内容</button>
      <hr />
      <h2>v-if多个条件的渲染</h2>
      <div>
        <input type="text" v-model="score" />
        <h2 v-if="score >= 90">优秀</h2>
        <h2 v-else-if="score >= 60">良好</h2>
        <h2 v-else>不及格</h2>
      </div>
      <h3>v-if和template结合使用</h3>
      <template v-if="isShow">
        <h3>v-if控制多个h3标签显示隐藏</h3>
        <h3>v-if控制多个h3标签显示隐藏</h3>
        <h3>v-if控制多个h3标签显示隐藏</h3>
      </template>
      <template v-else>
        <h4>v-if控制多个h4标签显示隐藏</h4>
        <h4>v-if控制多个h4标签显示隐藏</h4>
        <h4>v-if控制多个h4标签显示隐藏</h4>
      </template>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vif',
    data() {
      return {
        isShow: true,
        score: 95
      }
    },
    methods: {
      toggle() {
        this.isShow = !this.isShow
      }
    }
  }
  </script> -->
  <script setup>
  import { ref } from 'vue'
  defineOptions({
    name: 'vif'
  })
  const isShow = ref(true)
  const score = ref(10)
  const toggle = () => {
    isShow.value = !isShow.value
  }
  </script>
  
  <style lang="scss" scoped>
  h3 {
    color: red;
  }
  h4 {
    color: green;
  }
  </style>
  